<template>
  <view class="comment">
    <view class="title">{{ count + $t("videoGoods.detail.comment") }}</view>

    <view class="item" v-for="item of items" :key="item.id">
      <view class="img" @click="gotoUserInfo(item)">
        <image :src="item.avatar" mode="aspectFill"></image>
      </view>

      <view class="txt">
        <view class="txtBox">
          <view class="txtCon">
            <view class="tit" @click="gotoUserInfo(item)">
              <view class="name">{{ item.name }}</view>
              <view v-if="getAuthor(item)" class="tag">{{
                $t("videoGoods.detail.author")
              }}</view>
            </view>
            <view class="con" @click="comment(item)">{{ item.comment }}</view>
            <view class="time" @click="comment(item)">
              {{ item.time }}
            </view>
          </view>

          <view class="menu">
            <i class="iconfont icon1 icon-good-fill" v-if="item.is_like"></i>
            <i class="iconfont icon2 icon-good" v-else></i>

            <view class="num">{{ item.like_count }}</view>
          </view>
        </view>

        <view
          class="item cItem"
          v-for="cItem of item.reply_list"
          :key="cItem.id"
        >
          <view class="img img2" @click="gotoUserInfo(cItem)">
            <image :src="cItem.avatar" mode="aspectFill"></image>
          </view>

          <view class="txt">
            <view class="txtBox">
              <view class="txtCon">
                <view class="tit" @click="gotoUserInfo(cItem)">
                  <view class="name">
                    {{ cItem.name }}
                  </view>
                  <view class="tag" v-if="getAuthor(cItem)">{{
                    $t("videoGoods.detail.author")
                  }}</view>
                  <view class="name">
                    {{ `${$t("find.reply")} ${cItem.reply_user}` }}</view
                  >
                </view>
                <view class="con" @click="comment(cItem, item.id)">{{
                  cItem.comment
                }}</view>
                <view class="time" @click="comment(cItem, item.id)">
                  {{ cItem.time }}
                </view>
              </view>

              <view class="menu">
                <i
                  class="iconfont icon1 icon-good-fill"
                  v-if="cItem.is_like"
                ></i>
                <i class="iconfont icon2 icon-good" v-else></i>

                <view class="num">{{ cItem.like_count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="noMore">{{ $t("home.noMore") }}~</view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },

    count: {
      type: Number,
      default: 0,
    },

    userId: {
      type: [String, Number],
      default: "",
    },
  },

  data() {
    return {};
  },

  computed: {
    getAuthor() {
      return (item) => {
        return parseInt(this.userId) === parseInt(item.user_id);
      };
    },
  },

  methods: {
    gotoUserInfo(item) {
      this.$utils.toUrl(
        `/videoGoods/userInfo/index?id=${item.user_id}`,
        "navigate"
      );
    },

    comment(item, id) {
      if (parseInt(this.userId) === parseInt(item.user_id)) {
        return;
      }

      this.$emit("comment", item, id);
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  padding: 0 30rpx;
}

.noMore {
  padding: 40rpx 0;
  font-size: 22rpx;
  text-align: center;
  color: #c1c1c1;
}

.item {
  position: relative;
  display: flex;
  padding: 30rpx 0;

  &:after {
    content: "";
    position: absolute;
    left: 74rpx;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #f8f8f8;
  }

  .img {
    width: 60rpx;
    height: 60rpx;

    image {
      width: 100%;
      height: 100%;
      background: #f3f3f3;
      border-radius: 50%;
    }

    &.img2 {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 16rpx;
    overflow: hidden;
  }

  .txtCon {
    padding-right: 10rpx;
    flex: 1;
    overflow: hidden;
  }

  .txtBox {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .tit {
    font-size: 24rpx;
    color: #8c8c8c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    view {
      display: inline-block;
      vertical-align: middle;
    }

    .name {
      max-width: 200rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag {
      margin: 0 4rpx;
      padding: 2rpx 6rpx;
      background: #f2f2f2;
      color: #8c8c8c;
      font-size: 20rpx;
      border-radius: 2px;
    }
  }

  .con {
    padding: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    line-height: 42rpx;
  }

  .time {
    color: #8c8c8c;
    font-size: 24rpx;
  }

  .menu {
    display: flex;
    color: #8c8c8c;

    .num {
      margin-left: 10rpx;
      font-size: 24rpx;
    }

    .iconfont {
    }

    .icon-good-fill {
      color: #f0250e;
    }
  }
}
</style>
